<%-- 
    Document   : lab
    Created on : 2019-7-13, 20:54:37
    Author     : dusin
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>教学助手</title>
        <link rel="stylesheet" href="../../js/jquery/themes/default/easyui.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/icon.css" type="text/css" />
        <script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="../../js/jquery/jquery.easyui.min.js"></script>        
        <script language="JavaScript">
            $(document).ready(function() {
            });

        </script>
    </head>
    <body>
        <table id="dg-lab" class="easyui-datagrid"  title="${courseName}考勤" toolbar="#stoolbar"
               data-options="url:'../../servlet/student/Attendances',fitColumns:true,singleSelect:true">
            <thead>
                <tr>
                    <th data-options="field:'id',width:20" hidden="true">id</th>
                    <th data-options="field:'no',width:30">No</th>
                    <th data-options="field:'createtime',width:150">考勤时间</th>
                    <th data-options="field:'status',width:100" formatter='formatterAttendanceStatus'>状态</th>
                    <th data-options="field:'note',width:150" >备注</th>                    
                </tr>
            </thead>
        </table>
        <div id="stoolbar">
            <a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="refresh()">刷新</a>            
        </div>

        
        <script type="text/javascript">
            function refresh() {
                $('#dg-lab').datagrid('reload');    // reload the user data
            }          
            function formatterAttendanceStatus(value, row){
                if(value==1){   //这里value的类型是String，不能用‘===’三等号
                    return '<span style="color:red;">'+'✖'+'</span>';
                }else if(value==2){
                    return '<span style="color:blue;font-size:30px">'+'△'+'</span>';
                }else if(value==3){
                    return '<span style="color:blue;">'+'◯'+'</span>';
                }else if(value==4){
                    return '<span style="color:yellow;">'+'L'+'</span>';
                }else if(value==5){
                    return '<span style="color:yellow;">'+'E'+'</span>';
                }else{
                   return '<span style="color:green;">'+'✔'+'</span>';
                }                
            }      
        </script>
    </body>
</html>
